html,
body {
    width: 100%;
    height: 100%;
 
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

// 轮播图
.head {
    width: 100%;
    height: 180px;
    display: flex;

    // background-color: red;
    // 
    .swiper {
        width: 100%;
        height: 100%;
    }
    .img1{
        width: 100%;
        height: 100%;
    }
    
}

//主题内容区
.main {
    width: 100%;
    flex: 1;
    // height: 900px;
    // overflow-y: scroll;
    // background: orchid;
    padding: 0px 15px;
    margin-top: 10px;

    // 
    .dv1 {
        width: 100%;
        height: 130px;
        display: flex;
        justify-content: space-between;

        //今日排名
        .rank {
            width: 150px;
            height: 130px;

            border-radius: 15px;
            position: relative;

            // background: url('../../assets/imgs/index-card-rank.png') no-repeat;
            background-color: rgb(58, 167, 217);
            overflow: hidden;

            // background-size: 50%;
            .rk {
                position: absolute;
                top: 15px;
                left: 10px;
                font-size: 19px;
                font-weight: bold;
                color: rgba(0, 78, 115, 1);
                z-index: 1;

            }

            .day {
                position: absolute;
                top: 30px;
                font-weight: 500;
                right: 15px;
                color: #fff;
                font-size: 80px;
                z-index: 1;

            }

            img {
                position: absolute;
                width: 120px;
                height: 110px;
                top: 30px;
                left: -16px;
                opacity: .5;
            }


        }

        //累计打卡
        .punchCard {
            width: 212px;
            height: 130px;
            border-radius: 15px;
            background-color: #7BCBF5;
            position: relative;

            //累计打卡
            .accumlate {
                position: absolute;
                top: 15px;
                left: px;
                color: #005177;
                font-size: 19px;
                font-weight: bold;
                z-index: 1;

            }

            //今日打卡
            .nowcard {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100px;
                height: 40px;
                font-size: 16px;
                bottom: 25px;
                right: 15px;
                border-radius: 22px;
                border: 2px solid #004E73;
                z-index: 1;
                font-weight: bold;
                color: #004E73;

            }
            .clock1{
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100px;
                height: 40px;
                font-size: 16px;
                bottom: 25px;
                right: 15px;
                border-radius: 22px;
                border: 2px solid #000;
                z-index: 1;
                font-weight: bold;
                color: white;
                background:#005177 ;
            }

            img {
                position: absolute;
                width: 110px;
                height: 110px;
                bottom: 10px;
                left: 10px;
            }

        }
    }

    //运动数据
    .dv2 {
        width: 100%;
        height: 100px;
        display: flex;
        margin-top: 15px;
        justify-content: space-between;

        //运动数据
        .rundata {
            width: 180px;
            height: 100px;
            position: relative;
            border-radius: 15px;
            background-color: red;
            background: url('../../assets/imgs/index-card-data.png') no-repeat left / cover;

            .rundatatxt {
                position: absolute;
                color: rgba(255, 255, 255, 1);
                font-size: 16px;
                top: 12px;
                left: 14px;
                font-weight: bold;
                font-family: 'PingFangSC-regular';
            }
        }

        //累计运动徽章
        .badge {
            width: 185px;
            height: 100px;
            border-radius: 15px;
            position: relative;

            background-color: #7BCBF5;

            .badgetxt {
                position: absolute;
                width: 96px;
                height: 22px;
                color: #005177;
                font-size: 16px;
                top: 14px;
                left: 14px;
                z-index: 1;
                font-weight: bold;
                font-family: 'PingFangSC-regular';

            }

            .munber {
                position: absolute;
                top: 10px;
                right: 30px;
                width: 48px;
                font-weight: 500;
                height: 110px;
                color: rgba(0, 78, 115, 1);
                font-size: 80px;

            }

            .mei {
                position: absolute;
                width: 18px;
                height: 25px;
                bottom: 19px;
                right: 14px;
                font-weight: bold;
                color: rgba(0, 81, 119, 1);
                font-size: 18px;
                font-family: 'PingFangSC-bold';

            }

            img {
                position: absolute;
                width: 90px;
                height: 90px;
                bottom: 0px;
                left: 0px;

            }


        }

    }

    // 课程训练
    .dv3 {
        width: 100%;
        height: 100px;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        margin-top: 15px;
        background: url('../../assets/imgs/course-img04.jpg')no-repeat top / cover ;

        .course {
            position: absolute;
            width: 64px;
            height: 22px;
            top: 14px;
            left: 14px;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
           
        }

    }
    //户外跑步
    .dv4 {
        width: 100%;
        height: 110px;
        border-radius: 15px;
        background-color: #7BCBF5;
        overflow: hidden;
        position: relative;
        margin-top: 15px;
        // background: url('../../assets/imgs/course-img02.jpg')no-repeat top / cover ;

        // .run {
        //     position: absolute;
        //     width: 64px;
        //     height: 22px;
        //     top: 14px;
        //     left: 14px;
        //     color: rgba(255, 255, 255, 1);
        //     font-size: 16px;
           
        // }

    }
}

// 底部导航区
// .foot {
//     width: 100%;
//     height: 70px;
//     display: flex;
//     // background-color: aqua;
//     justify-content: space-between;

//     a {
//         width: 25%;
//         display: flex;
//         flex-direction: column;
//         text-align: center;

//         span {
//             font-size: 45px;
//         }

//     }


// }
.dv4{
    background: url('../../assets/imgs/index-card-run.png') ;
    background-size: cover;
    .run{
        position: absolute;
        width: 64px;
        height: 22px;
        top: 14px;
        left: 14px;
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
       

    }
}